import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

class TaskCategoryDialog extends StatefulWidget {
  final void Function() okCallback;

  const TaskCategoryDialog({super.key, required this.okCallback});

  @override
  State<TaskCategoryDialog> createState() => _TaskCategoryDialogState();
}

class _TaskCategoryDialogState extends State<TaskCategoryDialog> {
  final _formKey = GlobalKey<FormState>();
  String _taskCategoryName = '';
  Color _color = const Color(0xff443a49);

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('添加任务分类'),
      content: Form(
        key: _formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            TextFormField(
              onSaved: (value) {
                _taskCategoryName = value ?? '';
              },
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return '请输入任务分类名称';
                }
                return null;
              },
              decoration: const InputDecoration(
                  border: InputBorder.none,
                  hintText: '任务分类名称',
                  hintStyle: TextStyle(fontSize: 16)),
            ),
            Row(
              children: [
                Container(
                  color: _color,
                  width: 24,
                  height: 24,
                ),
                TextButton(
                    onPressed: () {
                      showDialog(
                          builder: (context) => AlertDialog(
                                title: const Text('请选择一个颜色'),
                                content: SingleChildScrollView(
                                    child: ColorPicker(
                                  pickerColor: _color,
                                  onColorChanged: (selectColor) {
                                    _color = selectColor;
                                  },
                                )),
                                actions: [
                                  TextButton(
                                      onPressed: () {
                                        Navigator.of(context).pop();
                                        setState(() {});
                                      },
                                      child: const Text('确定')),
                                ],
                              ),
                          context: context);
                    },
                    child: const Text('选择颜色')),
              ],
            ),
          ],
        ),
      ),
      actions: [
        TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: const Text('取消')),
        TextButton(
            onPressed: () async {
              if (_formKey.currentState?.validate() ?? false) {
                Navigator.of(context).pop();
              }
            },
            child: const Text('添加')),
      ],
    );
  }
}
